import React, {Component} from 'react';
import {nanoid} from "nanoid";
import "../../styles/components/toDoList.scss";
const MyContext = React.createContext({});
let {Provider, Consumer} = MyContext;
class Header extends Component {
    handleKeyUp = (event) => {
        let {key, target} = event;
        if (key === 'Enter') {
            let name = target.value.trim();
            if (!name) return;
            let obj = {name, id: nanoid(), done: false}
            this.props.addToDo(obj);
            target.value = ''
        }
    }

    render () {
        return (
            <div>
                <input type="text" onKeyUp={this.handleKeyUp} className="input" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        );
    }
}
class List extends Component {
    render () {
        const {updateToDo, deleteToDo} = this.props
        return (
            <>
                <Consumer>
                    {
                        val => {
                            return (
                                <div className="content">
                                    {val.map(item =>
                                        <Item
                                            key={item.id}
                                            {...item}
                                            updateToDo={updateToDo}
                                            deleteToDo={deleteToDo}/>)}
                                </div>
                            )
                        }
                    }
                </Consumer>
            </>
        );
    }
}
class Item extends Component {
    handleChange = (id, e) => {
        const {target} = e;
        this.props.updateToDo(id, target.checked)
    }
    deleteToDo = (id) => {
        if (confirm('确定删除吗？')) {
            this.props.deleteToDo(id)
        }
    }

    render () {
        const {name, done, id} = this.props
        return (
            <div className="list-item">
                <label>
                    <input type="checkbox" checked={done} onChange={e => this.handleChange(id, e)}/>
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" onClick={() => this.deleteToDo(id)} style={{display: 'none'}}>刪除
                </button>
            </div>
        );
    }
}
class Footer extends Component {
    checkAll = (e) => {
        this.props.checkAll(e.target.checked)
    }
    clearAllDone = () => {
        this.props.clearAllDone()
    }

    render () {
        const {todos} = this.props.params;
        //已完成的个数
        const doneCount = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
        const total = todos.length
        return (
            <div className="footer">
                <div className="flex">
                    <input type="checkbox" onChange={e => this.checkAll(e)}
                           checked={total === doneCount && total !== 0}/>
                    <div>
                        已完成 <span>{doneCount}</span>/
                        全部 <span>{total}</span>
                        <span>测试</span>
                    </div>
                </div>
                <div>
                    <button className="btn btn-danger" onClick={this.clearAllDone}>清楚已完成任務</button>
                </div>
            </div>
        );
    }
}
class TodoList extends Component {
    state = {
        todos: [
            {id: 1, name: "测试一", done: false},
            {id: 2, name: "测试二", done: true},
            {id: 3, name: "测试三", done: false},
        ],
    }
    addToDo = (val) => {
        const {todos} = this.state;
        const newTodos = [val, ...todos];
        this.setState({todos: newTodos})
    }
    updateToDo = (id, done) => {
        const {todos} = this.state;
        const newTodos = todos.map(item => {
            if (item.id === id) return {...item, done}
            else return item
        })
        let count = newTodos.filter(item => item.done === true).length;
        this.setState({todos: newTodos, count: count})
    }
    deleteToDo = (id) => {
        const {todos} = this.state;
        const newTodos = todos.filter(item => item.id !== id)
        this.setState({todos: newTodos})
    }
    // 全选/全不选
    checkAll = (done) => {
        const {todos} = this.state;
        const newTodos = todos.map(item => ({...item, done: done}))
        this.setState({todos: newTodos})
    }
    clearAllDone = () => {
        const {todos} = this.state;
        const newTodos = todos.filter(item => !item.done)
        this.setState({todos: newTodos})
    }

    render () {
        const {todos} = this.state;
        return (
            <Provider value={todos}>
                <div className="toDoList">
                    <Header addToDo={this.addToDo}/>
                    <List updateToDo={this.updateToDo} deleteToDo={this.deleteToDo}/>
                    <Footer params={{todos}} checkAll={this.checkAll} clearAllDone={this.clearAllDone}/>
                </div>
            </Provider>

        );
    }
}
export default TodoList;